<style>
  .one{
    border:1px solid red;
    margin:20px;
    padding:20px;
    min-height:100px;
  }
  .two{
    border:2px solid green;
    margin:20px;
    padding:20px;
    min-height:100px;
    color:red;
    background:lightyellow;
  }

  .error{
    color:red;
    background:pink;
    border:5px dashed orange;
  }

  .success{
    color:green;
    background:lightgreen;
    border:5px dashed skyblue;
  }
</style>
<!---Included External JS library------->
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>

<!---Internal JS Code------->
<script type="text/javascript">
  $(document).ready(function(){
    $('#submitId').on('click',function(){
      $('#oneId').removeClass('one').addClass('error');
      $('#twoId').removeClass('two').addClass('success');

      //$('#oneId').addClass('error');
      //$('#twoId').addClass('success');
    });
  });
</script>

<div id="oneId" class="one">
    1111111111111111This is some data in div1.This is some data in div1.<span style="color:green">This is some data in div1 in div1.</span>
    This is some data in div1.This is some data in div1.This is some data in div1.This is some data in div1.
    This is some data in div1.This is <a href="#">link</a> some data in div1.This is some data in div1.This is some data in div1.

</div>

<div id="twoId" class="two">
    222222222222This is some data in div1.This is some data in div1.<span style="color:green">This is some data in div1 in div1.</span>
    This is some data in div1.This is some data in div1.This is some data in div1.This is some data in div1.
    This is some data in div1.This is <a href="#">link</a> some data in div1.This is some data in div1.This is some data in div1.

</div>

<input type="submit" id="submitId" name="submit" value="Copy Data from div 1 to div 2!!" />
